<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>laychat聊天历史记录</title>
    <meta property="qc:admins" content="26422222473014677235251666547" />
    <link rel="stylesheet" href="Public/layui/css/layui.css">
    <link rel="stylesheet" href="Public/layui/css/xiaowei.css">
    <script src="Public/layui/layui.js"></script>
</head>

<body>
    <script>
    layui.use(['layim', 'laydate'], function() {
        var $ = layui.jquery;
        var layim = layui.layim;
        laydate = layui.laydate;
        var data = <php> echo json_encode($history); </php>;
        var html = '';
        var user_id='{:get_user_id()}';
        
        for (var key in data) {
        	var item = JSON.parse(data[key]);
        	if(item.from_id==user_id){
        		mine='';
        	}else{
        		mine='';
        	}
            var item = JSON.parse(data[key]);
            var sendtime = laydate.now(item.timestamp, "YYYY-MM-DD hh:mm:ss");
            html += '<li class="'+mine+'"><div class="layim-chat-user"><img src="' + item.avatar + '"><cite>' + item.username + '<i>' + sendtime + '</i></cite></div><div class="layim-chat-text">' + layim.content(item.content) + '</div></li>';
        }
        $(".layim-chat-main ul").append(html);
    });
    </script>
    <div class="layim-chat layim-chat-friend">
        <div class="layim-chat-main" style="width:100%; height:100%;">
            <ul style="margin-right:30px;">
            </ul>
        </div>
        <div class="history-page">
            <div class="pagination">
                {$page}
            </div>
        </div>
    </div>
    <style>
    body {
        overflow-x: hidden
    }
    
    .layui-layer {
        text-align: left;
    }
    
    .layim-chat {
        display: block;
    }
        .pagination{
    	margin: 0;
    	padding-bottom:10px;
    }
    </style>
</body>
